var slideX;
var slidex;
var flicker;

var map = L.map('map', {
    attributionControl: false,
    zoomControl: false,
    measureControl: true,
    center: [34.83, 113.57],
    zoom: 14
});
initLayerControlUI();

/**
 * 平移到点，缩放到最大程度
 * @param lat
 * @param lng
 */
function setCenter(lat, lng) {
    map.setView([lat, lng], 19);
    addFlicker(lat, lng);
}

/**
 * 缩放到指定点，指定等级
 * @param lat
 * @param lng
 * @param zoom
 */
function setZoomCenter(lat, lng, zoom) {
    map.setView([lat, lng], zoom);
    addFlicker(lat, lng);
}

function addFlicker(lat, lng) {
    if (map.hasLayer(flicker)) {
        map.removeLayer(flicker);
    }
    flicker = L.marker([lat, lng], {highlight: 'permanent'}).addTo(map);
}

/**
 * 初始化底图
 */
function initLayerControlUI() {
    //增加图标
    var layerIcon = $('<div class="toolList layer" onclick="layerSwitch()"></div>');
    $('body').append(layerIcon);
    //添加面板
    var div = document.createElement('div');
    div.id = "LayerControlPanel";
    document.body.appendChild(div);
    var html = "<div class='box'>" +
        "    <div class='mapClass'>" +
        "        <img src='../../img/streets.png'onclick='tabLayer(0)'><br/>" +
        "        2D平面图" +
        "    </div>" +
        "    <div class='mapClass'>" +
        "        <img src='../../img/satellite.png' onclick='tabLayer(4)'><br/>" +
        "        卫星图" +
        "    </div>" +
        "    <div class='mapClass'>" +
        "        <img src='../../img/earth.png' onclick='addCesium()'><br/>" +
        "        三维模型" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/fireUnit.png&quot;)'></div>" +
        "    <div class='mapStyle'>消防单位</div>" +
        "    <div class='check'>" +
        "        <div class='testswitch'>" +
        "            <input onclick='addFirePower(this)' class='testswitch-checkbox' id='onoffswitch' type='checkbox'>" +
        "            <label class='testswitch-label' for='onoffswitch'>" +
        "                <span class='testswitch-inner' data-on='ON' data-off='OFF'></span>" +
        "                <span class='testswitch-switch'></span>" +
        "            </label>" +
        "        </div>" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/linkUnit.png&quot;)'></div>" +
        "    <div class='mapStyle'>联动单位</div>" +
        "    <div class='check'>" +
        "        <div class='testswitch'>" +
        "            <input onclick='addLinkUnit(this)' class='testswitch-checkbox' id='onoffswitch1' type='checkbox'>" +
        "            <label class='testswitch-label' for='onoffswitch1'>" +
        "                <span class='testswitch-inner' data-on='ON' data-off='OFF'></span>" +
        "                <span class='testswitch-switch'></span>" +
        "            </label>" +
        "        </div>" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/device.png&quot;)'></div>" +
        "    <div class='mapStyle'>消防设施</div>" +
        "    <div class='check'>" +
        "        <div class='testswitch'>" +
        "            <input onclick='addDeviceLayer(this)' class='testswitch-checkbox' id='onoffswitch2' type='checkbox'>" +
        "            <label class='testswitch-label' for='onoffswitch2'>" +
        "                <span class='testswitch-inner' data-on='ON' data-off='OFF'></span>" +
        "                <span class='testswitch-switch'></span>" +
        "            </label>" +
        "        </div>" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/dangerousArea.png&quot;)'></div>" +
        "    <div class='mapStyle'>危险场所</div>" +
        "    <div class='check'>" +
        "        <div class='testswitch'>" +
        "            <input onclick='addDangerous(this)' class='testswitch-checkbox' id='onoffswitch3' type='checkbox'>" +
        "            <label class='testswitch-label' for='onoffswitch3'>" +
        "                <span class='testswitch-inner' data-on='ON' data-off='OFF'></span>" +
        "                <span class='testswitch-switch'></span>" +
        "            </label>" +
        "        </div>" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/importantUnit.png&quot;)'></div>" +
        "    <div class='mapStyle'>重点单位</div>" +
        "    <div class='check'>" +
        "        <div class='testswitch'>" +
        "            <input onclick='addImportant(this)' class='testswitch-checkbox' id='onoffswitch4' type='checkbox'>" +
        "            <label class='testswitch-label' for='onoffswitch4'>" +
        "                <span class='testswitch-inner' data-on='ON' data-off='OFF'></span>" +
        "                <span class='testswitch-switch'></span>" +
        "            </label>" +
        "        </div>" +
        "    </div>" +
        "</div>" +
        "<div class='box title'>" +
        "    地图风格" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/streets.png&quot;)'></div>" +
        "    <div class='mapStyle'>经典地图</div>" +
        "    <div class='check' onclick='tabLayer(0)'>" +
        "    <input class='input1' type='radio' value='guangpan' name='choose' id='style1'>" +
        "    <label class='input1-label' for='style1'></label>" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/dark.png&quot;)'></div>" +
        "    <div class='mapStyle'>午夜黑风格</div>" +
        "    <div class='check' onclick='tabLayer(1)'>" +
        "    <input class='input1' type='radio' value='guangpan' name='choose' id='style2' checked='checked'>" +
        "    <label class='input1-label' for='style2'></label>" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/light.png&quot;)'></div>" +
        "    <div class='mapStyle'>浅色风格</div>" +
        "    <div class='check' onclick='tabLayer(2)'>" +
        "    <input class='input1' type='radio' value='guangpan' name='choose' id='style3'>" +
        "    <label class='input1-label' for='style3'></label>" +
        "    </div>" +
        "</div>" +
        "<div class='box'>" +
        "    <div class='circleImg' style='background-image: url(&quot;../../img/emerald.png&quot;)'></div>" +
        "    <div class='mapStyle'>绿宝石风格</div>" +
        "    <div class='check' onclick='tabLayer(13)'>" +
        "    <input class='input1' type='radio' value='guangpan' name='choose' id='style4'>" +
        "    <label class='input1-label' for='style4'></label>" +
        "    </div>" +
        "</div>" ;
    div.innerHTML = html;

    touchSlide(div);

}

/**
 * 弹出地图选择面板
 */
function layerSwitch2() {
    var div = document.createElement('div');
    div.id = "LayerControlPanel";
    document.body.appendChild(div);
    var html = "<ul id='mapList'>" +
        "<div class='mapStyle'>底图选择</div>" +
        "</ul>";
    div.innerHTML = html;
    var number = BaseLayers.getSize();
    //动态添加底图列表
    for (var i = 0; i < number;) {
        if (i + 2 <= BaseLayers.getSize()) {
            var second = i + 1;
            $("#mapList").append($("<li><div><img src='" + BaseLayers.getLayerDetails(i).icon + "' onclick='tabLayer(" + i + ")'/><br/><span class='mapname'>" + BaseLayers.getLayerDetails(i).title + "</span></div><div><img src='" + BaseLayers.getLayerDetails(second).icon + "' onclick='tabLayer(" + second + ")'/><br/><span class='mapname'>" + BaseLayers.getLayerDetails(second).title + "</span></div></li>"));
        } else {
            $("#mapList").append($("<li><div><img src='" + BaseLayers.getLayerDetails(i).icon + "' onclick='tabLayer(" + i + ")'/><br/><span class='mapname'>" + BaseLayers.getLayerDetails(i).title + "</span></div></li>"));
        }
        i = i + 2;
    }
    $("#LayerControlPanel").animate({width: '70vw'});
    touchSlide(div);
}

/**
 * 弹出地图选择面板
 */
function layerSwitch() {
    $("#LayerControlPanel").animate({width: '70vw'});
}

function touchSlide(obj) {
    obj.addEventListener('touchstart', touch, false);
    obj.addEventListener('touchmove', touch, false);
    obj.addEventListener('touchend', touch, false);
}

function touch(event) {
    var touch = event.targetTouches[0];
    // 把元素放在手指所在的位置
    switch (event.type) {
        case "touchstart":
            slideX = touch.pageX;
            break;
        case "touchmove":
            slidex = touch.pageX;
            break;
        case "touchend":
            try {
                if (slidex - slideX > 50) {
                    slidex = 0;
                    $("#LayerControlPanel").animate({width: '0vw'});
                    removePlotting();
                }
            } catch (err) {

            }
            break;
        default:
            break;
    }
}

/**
 * 移除底图选择面板
 */
function removeLayerControl() {
    var div = document.getElementById("LayerControlPanel");
    div.removeEventListener('touchstart', touch, false);
    div.removeEventListener('touchmove', touch, false);
    div.removeEventListener('touchend', touch, false);
    document.body.removeChild(div);
}


/**
 * 根据ID移除DIV
 * @param id
 */
function removeDiv(id) {
var target=document.getElementById(id);
if(target){
document.body.removeChild(document.getElementById(id));
}
}

/**
 * 底图菜单点击事件
 * @param index
 */
function tabLayer(index) {
    removeDiv("iframe");
    layerManager.setBaseLayer(BaseLayers.getMapBoxUrl(), BaseLayers.getLayerDetails(index).id, BaseLayers.getToken());
}

/**
 * 展示室内地图
 */
function showIndoor() {
    map.fitBounds([[34.825008392334, 113.557716369629],
        [34.8254280090332, 113.558219909668]]);
}

/**
 * 添加室外消防设备图层
 */
function addDeviceLayer(node) {
    if (node.checked) {
        addSource(mapSource.Xfss.url, mapSource.Xfss.layer, "室外消防设备");
    } else {
        removeSource("室外消防设备");
    }
}

/**
 * 添加消防力量
 */
function addFirePower(node) {
    console.log("添加消防队");
    if (node.checked) {
        addSource(mapSource.Xfll.url, mapSource.Xfll.layer, "消防队");
    } else {
        removeSource("消防队");
    }
}

/**
 * 添加危险场所
 */
function addDangerous(node) {
    if (node.checked) {
        addSource(mapSource.DangerousArea.url, mapSource.DangerousArea.layer, "危险场所");
    } else {
        removeSource("危险场所");
    }
}

/**
 * 添加重点防护单位
 */
function addImportant(node) {
    if (node.checked) {
        addSource(mapSource.fire_Enterprise.url, mapSource.fire_Enterprise.layer, "重点单位");
    } else {
        removeSource("重点单位");
    }
}

/**
 * 添加联动单位
 */
function addLinkUnit(node) {
    if (node.checked) {
        addSource(mapSource.LinkUnit.url, mapSource.LinkUnit.layer, "联动单位");
    } else {
        removeSource("联动单位");
    }
}

/**
 * 根据名字移除图层
 * @param name [string] 图层名称
 */
function removeSource(name) {
    map.eachLayer(function (layer) {
        if (layer.getAttribution() == name) {
            map.removeLayer(layer);
        }
    });
}

/**
 * 添加图层
 * @param url [string] 地图地址
 * @param layerName [string] 图层名称
 * @param name [string] 图层中文名称
 */
function addSource(url, layerName, name) {
    var wmsLayer = L.tileLayer.wms(url, {
        layers: layerName,
        crs: L.CRS.EPSG4326,
        format: 'image/png',
        transparent: true,
        maxZoom: 33,
        minZoom: 1,
        attribution: name
    });
    wmsLayer.addTo(map);
}

//添加三维
function addCesium() {
    var iframe=document.createElement('iframe');
    iframe.id="iframe";
    iframe.src="../../test.html";
    document.body.appendChild(iframe);
    var box=document.getElementsByClassName("mapLi");
    for(var i=0;i<box.length;i++){
        box[i].style.display="none";
    }
}
/**
 * 根据ID移除DIV
 * @param id
 */
//function removeDiv(id) {
//    document.body.removeChild(document.getElementById(id));
//}